<script lang="ts" setup>
import { checkMaintenanceStatus } from '@/api/spa';
import { useLocale } from '@/locale/locale';
import { useRouter } from '@/router';
import { useAuthStore } from '@/store/auth';
import { isWechat } from '@/utils/platform';
import { onMounted, ref } from 'vue';

const { t } = useLocale();
const authStore = useAuthStore();
const router = useRouter();

const maintenanceInfo = ref({
  isOpen: false,
  content: ''
});

function toOrder() {
  uni.showModal({
    title: t('LCKey_friendlyReminder'),
    content: t('TransfeMaintenanceMsg'),
    confirmText: t('tripChangeFeedbook'),
    confirmColor: '#576B95',
    success: function (res) {
      if (res.confirm) {
        if (authStore.isLoggedIn) {
          uni.navigateTo({
            url: '/pages/cs/cs'
          });
        } else {
          uni.navigateTo({
            url: '/pages/auth/login'
          });
        }
      } else if (res.cancel) {
      }
    }
  });
}

onMounted(() => {
  checkMaintenanceStatus().then((res) => {
    if (res.code == 0) {
      maintenanceInfo.value.isOpen = parseInt(res.data.isOpen) == 1;
      maintenanceInfo.value.content = res.data.info ? res.data.info.content : '';
    } else {
      uni.navigateBack();
    }
  });
});
</script>

<template>
  <view class="spa-index-contain">
    <view class="spa-index-contain-navbar">
      <uni-nav-bar
        v-if="isWechat()"
        :border="false"
        backgroundColor="none"
        fixed
        left-icon="left"
        status-bar
        @click-left="router.back"
      />
    </view>
    <view v-if="maintenanceInfo.isOpen" class="spa-index-contain-maintenance">
      <uv-parse :content="maintenanceInfo.content"></uv-parse>
      <view class="spa-index-contain-maintenance-bottom">
        <view @click="toOrder">{{ t('TransferBookNow') }}</view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.spa-index {
  &-contain {
    background: #ffffff;
    padding-bottom: 120rpx;
    padding-bottom: calc(constant(safe-area-inset-bottom) + 120rpx);
    padding-bottom: calc(env(safe-area-inset-bottom) + 120rpx);

    &-navbar {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
    }

    &-maintenance {
      padding-bottom: 110rpx;
      padding-bottom: calc(110rpx + constant(safe-area-inset-bottom));
      padding-bottom: calc(110rpx + env(safe-area-inset-bottom));

      &-bottom {
        background: #ffffff;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding-top: 30rpx;
        padding-bottom: 30rpx;
        padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
        padding-bottom: calc(30rpx + env(safe-area-inset-bottom));

        view {
          margin: 0 24rpx;
          background: #763e18;
          height: 76rpx;
          border-radius: 20rpx;
          line-height: 76rpx;
          text-align: center;
          font-weight: 500;
          font-size: 30rpx;
          color: #ffffff;
        }
      }
    }
  }
}
</style>
